<!DOCTYPE html>
<html>
<head>
	
	<title><?php echo _MANAGER_TITLE_; ?></title>

	<?php $this->setFlag('list,vue,lazyload'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/manager/home/css/recommend.css?v=10" />

    <script type="text/javascript" src="html/manager/home/js/recommend.js"></script>

</head>
<body>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="tabtypeInfo" class="display-none" />
		<input type="text" id="sortationInfo" class="display-none" />
		<input type="text" id="statusInfo" value="1" class="display-none" />
		<input type="text" id="tempid" class="display-none" />
		<input type="text" id="menuid" class="display-none" />

		<div class="title-bar2">
            <div class="title2">首页推荐信息</div>
        </div>

        <div class="options-bar">
        	<div class="options-row">
        		<div class="options-row-left">状态：</div>
				<div class="options-row-right">
					<div class="options-item-selected" onclick="selectOneOption(this, '1', 'statusInfo')">展示中</div>
					<div class="options-item" onclick="selectOneOption(this, '4', 'statusInfo')">已过期</div>
				</div>
        	</div>
        	<div class="options-row2">
        		<div class="options-row-left">推荐分类：</div>
				<div id="tabtypeOptions" class="options-row-right">
					<div class="options-item-selected" onclick="selectOneOption(this, '', 'tabtypeInfo')">全部</div>
					<div class="options-item" onclick="selectOneOption(this, '0', 'tabtypeInfo')">专属推荐</div>
				</div>
        	</div>
        	<div class="options-row2">
        		<div class="options-row-left">栏目分类：</div>
				<div id="sortationOptions" class="options-row-right">
				</div>
        	</div>
        </div>

        <div class="tongji-bar">
            <span class="tongji">共<span id="listCount" class="tc1">0</span>条信息</span>
        </div>

        <div id="listBar" class="table-bar">
        	<table class="table-box">
        		<tr class="tr-head">
                    <td class="td-head">标题 / 服务特征 / 服务范围</td>
                    <td class="td-head hw2">封面图</td>
                    <td class="td-head hw3">推荐分类</td>
                    <td class="td-head hw3">栏目分类</td>
                    <td class="td-head hw3">状态</td>
                    <td class="td-head hw2">操作</td>
                </tr>
                <tr class="tr-item" v-for="info in list">
                    <td class="td-item-left">
                    	{{ info.title }}<br />
                        <span class="tc4">服务特征：</span>{{ info.feature }}<br />
                        <span class="tc4">服务范围：</span>{{ info.area }}
                    </td>
                    <td class="td-item-center hw2">
                        <img class="list-coverpic" v-lazy="info.smallpic" />
                    </td>
                    <td class="td-item-center hw3">
                    	<template v-if="info.tabtype == 0">专属推荐</template>
                        <template v-else>--</template>
                    </td>
                    <td class="td-item-center hw3">{{ info.sortation }}</td>
                    <td class="td-item-center hw3">
                        <template v-if="info.status == 1"><span class="tc2">展示中</span></template>
                        <template v-else-if="info.status == 4"><span class="tc3">已过期</span></template>
                        <template v-else>--</template>
                    </td>
                    <td class="td-item-center hw2">
                    	<span class="item-delete" v-on:click="deleteInfo(info.infoid)">删除</span>
                    </td>
                </tr>
        	</table>
        </div>

        <?php $this->import('page'); ?>
        <?php $this->import('options'); ?>

        <script type="text/javascript">
        	var recommend = new Vue({
	            el: '#listBar',
	            data: {
	                list: '',
	                permission: ''
	            },
                mounted() {
                    Vue.use(VueLazyload);
                }
	        });
        </script>

	</div>

</body>
</html>